<template>
    <div class="bc-f5 padding-30" style="min-height: calc(100vh - 200px);">
        <div v-if="!dataStatus" class="content-width m-a">
            <div class="bc-white padding-20 br-5 flex flex-jc-sb">
                <div class="ziyuan-img-item m-r-10" style="width: 290px;height: 290px;">
                    <img :src="data.cover[0]+'?imageslim'" style="width: 290px;height: 290px;object-fit:cover">
                </div>
                <div class="flex1 m-l-20">
                    <h1>{{data.title}}</h1>
                    <div class="flex flex-ai-c m-t-20 b-b padding-b-10">
                        <div class="m-r-20">
                            <ClockCircleOutlined />
                            <span>{{data.create_time}}</span>
                        </div>
                        <div class="m-r-20">
                            <VerticalAlignBottomOutlined />
                            <span>{{data.download_num}}</span>
                        </div>
                    </div>
                    <div class="m-t-20 flex flex-ai-fe">
                        <div v-if="data.price>0" class="d-red" style="margin-right: 40px;">
                            <span class="font-20 font-b m-r-10">&yen;</span>
                            <span class="font-40">{{data.price}}</span>
                        </div>
                        <div @click="collection">
                            <p class="d-red cursor-p">
                                <a-icon type="heart" />
                                <span>收藏</span>
                            </p>
                        </div>
                        <div class="m-l-20">
                            <p class="grey cursor-p">
                                <a-icon type="safety" />
                                <span>举报</span>
                            </p>
                        </div>
                    </div>

                    <div class="flex flex-ai-c m-t-20">
                        <div class="top-button cursor-p" style="background-color: #ffc107;">
                            <a-icon type="money-collect" theme="filled" />
                            <span v-if="data.is_buy" class="m-l-5" @click="downloadEvent">立即下载</span>
                            <span v-else-if="data.price == 0" class="m-l-5" @click="buyEvent">免费下载</span>
                            <span v-else class="m-l-5" @click="buyEvent">购买下载</span>
                        </div>

                        <div v-if="data.demo_url" class="top-button cursor-p main-bc white" @click="openDemo(data.demo_url)">
                            <a-icon type="desktop" />
                            <span class="m-l-5">演示</span>
                        </div>

                        <div v-if="data.qq" class="top-button cursor-p main-bc white" @click="openQQ(data.qq)">
                            <a-icon type="qq" />
                            <span class="m-l-5">联系卖家</span>
                        </div>
                    </div>

                    <div class="m-t-20 padding-10-20 bc-f5 br-5">
                        <a-icon type="info-circle" theme="filled" />
                        <span>特别声明：原创产品提供以上服务，破解产品仅供参考学习，如有需求，建议购买正版！如果源码侵犯了您的利益请</span>
                    </div>
                </div>
            </div>

			<div class="bc-white m-t-30 padding-20 br-5">
				<div v-if="data.abstract" class="bc-f5 br-5" style="padding: 20px 15px;">{{data.abstract}}</div>
				<div v-if="data.content" class="m-t-30 m-b-40 w-100" v-html="data.content"></div>
				<div v-else class="m-t-30 m-b-40 w-100">
					<!-- 这里是正文内容 -->
					<a-empty description="无资源详情" />
				</div>
			</div>
        </div>
        <!-- 加载 -->
		<a-spin v-if="dataStatus" tip="Loading..." />
    </div>
</template>

<script>
	import commonJs from '../../utils/common.js'
	import ziyuanApi from '../../api/resource.js'
	
    export default {
        data() {
        	return {
                id:'',
                data:'',

                authorZiyuan:[],
                tuijian:[],
                userZiyuan:'',

                dataStatus:true,

                visible:false,
                confirmLoading:true,
                showDialog:true,

                title:'',
            }
        },
        head(){
            return{
                title: '[预览]'+this.title,
            }
        },
        created() {			
			let params = commonJs.getUrlParams(window.location.href)
			if(!params.ziyuan_id){
				window.history.go(-1);
				return false
			}
			this.id = params.ziyuan_id
			this.getZiyuan()
        },
        methods: {
            // 获取资源
            getZiyuan(){
                ziyuanApi.getZiyuanInfo(this.id).then(res => {
                    if(res.result.length<=0){
                        return false;
                    }
                    this.data = res.result
                    this.title = this.data.title
                    this.dataStatus = false
                })
            },
            // 收藏
            collection(){
				this.$message.error('当前为预览功能，不可操作！')
            },
            // 购买
            buyEvent(){
				window.location.href = 'https://www.gouziyuan.cn/ziyuan/info/'+this.id
            },

            // 打开演示
            openDemo(url){
                window.open(url)
            },
            // 联系qq
            openQQ(qq){
                window.open('tencent://message/?uin='+qq+'&Site=&Menu=yes')
            }
        }
    }
</script>

<style scoped>
    .ziyuan-img-item{
        box-shadow: 8px 14px 20px 6px rgba(39, 44, 49, 0.1)
    }
    .ziyuan-img-item img{
        border-radius: 5px;
    }

    .top-button{
        width: 150px;
        text-align: center;
        line-height: 36px;
        border-radius: 5px;
        margin-right: 10px;
    }

</style>
